<!-- 用户通讯录 -->
<template>
  <PageWrapper dense fixedHeight contentClass="flex">
    <!-- 左侧部门树 -->
    <DeptTree class="m-4 mr-0 w-1/4 xl:w-1/5" @select="handleSelect" />
    <!-- 右侧用户联系信息table -->
    <div class="m-4 mr-0 w-3/4 xl:w-4/5 overflow-hidden">
      <div class="h-auto mb-4 py-2 bg-white">
        <BasicForm @register="registerForm" @submit="handleSubmit" :showResetButton="false" />
      </div>
      <BasicTable
        @register="registerTable"
        :searchInfo="searchInfo"
        :data-source="dataSource.userCotact"
      />
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { t } from '/@/hooks/web/useI18n';

  import { query } from '/@/api/addressbook/usercontact/userContact';
  import { conditionFormSchema, userContactTableColumns } from './usercontact.data';

  import DeptTree from './DeptTree.vue';

  const { createMessage, createErrorModal } = useMessage();

  export default defineComponent({
    name: 'UserContact',
    components: {
      BasicTable,
      PageWrapper,
      BasicForm,
      DeptTree,
    },
    setup() {
      //点击部门获取的部门id用于查询部门用户的条件
      const searchInfo = reactive<Recordable>({});

      //用户联系信息数据
      const dataSource = reactive({
        userCotact: [],
      });

      const [registerForm] = useForm({
        labelWidth: 80,
        schemas: conditionFormSchema,
        // actionColOptions: {
        //   span: 24,
        // },
      });

      /**
       * 请求后台查询接口返回数据显示
       */
      const [registerTable] = useTable({
        title: '用户联系信息',
        // api: query,
        columns: userContactTableColumns, //表头数据
        // formConfig: {
        //   labelWidth: 80, //设置查询表单中label的宽度
        //   schemas: conditionFormSchema, // form查询表单
        //   showResetButton: false, //查询条件部分中是否显示重置按钮
        // },
        // useSearchForm: false,
        showTableSetting: false, //是否显示表格设置
        showIndexColumn: true,
        canResize: true,
        bordered: true,
        striped: false,
        pagination: true, //关闭分页
      });

      /**
       * 点击部门事件，获取部门id
       * @param dept 部门id
       */
      function handleSelect(dept = '') {
        searchInfo.dept = dept;
        console.log('选中的部门id', searchInfo.dept);
        queryUserContact();
      }

      //表单的项目编码
      const pcode = ref('');
      /**
       * 表单提交按钮事件
       */
      function handleSubmit(values: any) {
        console.log('values', values);
        pcode.value = values.project;
        queryUserContact();
      }

      /**
       * 查询用户联系信息
       */
      async function queryUserContact() {
        if (dataSource.userCotact.length > 0) {
          dataSource.userCotact = [];
        }
        if (pcode.value != undefined && pcode.value != null && pcode.value != '') {
          query({ project: pcode.value, dept: searchInfo.dept })
            .then((res) => {
              console.log('res', res);
              if (res != null) {
                dataSource.userCotact.push(...res);
              }
            })
            .catch((ex) => {
              console.log('catch ', ex);
              createMessage.error(ex.msg);
            });
        } else {
          createErrorModal({
            title: t('错误提示'),
            content: '查询条件项目编码不能为空',
          });
        }
      }

      return {
        registerForm,
        registerTable,
        handleSelect,
        searchInfo,
        dataSource,
        handleSubmit,
        queryUserContact,
      };
    },
  });
</script>
